<template>
  <!--  用户基础信息  -->
  <view
      :style="{
        height: height
      }"
      class="user-common-info">

    <div style="height: 30rpx"></div>
    <div class="user-avatar-box">
      <image
          v-if="!(userInfo.fileIdOfAvatar)"
          mode="aspectFill"
          :src="$kt.file.byPath('image/logo.png')"
          class="user-avatar"></image>
      <image
          v-else
          mode="aspectFill"
          :src="$kt.file.visit(userInfo.fileIdOfAvatar)"
          class="user-avatar"></image>
    </div>

    <view class="user-text">
      <view
          v-if="isSelf"
          @click="$kt.router.navTo('/pages/updateInfo/updateInfo')"
          class="user-text-abs">
        ➠{{$i18n.zhToGlobal('信息变更')}}{{ " " }}
      </view>
      <view>
        <view v-if="userInfo.nickname" class="user-text-big">{{ userInfo.nickname }}</view>
        <view v-else class="user-text-big" style="opacity: .8">{{$i18n.zhToGlobal('未设置昵称')}}</view>
      </view>

      <view
          v-if="$i18n.getLanguageCode()!=='ar'"
          class="user-text-small">{{$i18n.zhToGlobal('邮箱')}}：{{ userInfo.email }}</view>
      <view
          v-else
          class="user-text-small">{{ userInfo.email }}：{{$i18n.zhToGlobal('邮箱')}}</view>
      <view
          v-if="userInfo.gmtCreate"
          class="user-text-small">
        <text
        >{{$i18n.zhToGlobal('注册时间')}}：{{$kt.date.format(userInfo.gmtCreate,"yyyy-MM-dd")}}</text>

      </view>

    </view>

  </view>
</template>

<script>
export default {
  props:{
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isSelf:{
      type: Boolean,
      default: false
    },
    isInAdmin:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      height: '200rpx',
      // 当前工作系列
      currentWorkSeries: {},
      // 学历
      eduLevel: {},
      // 学科专业
      eduMajor: {},
      // 学位
      eduMajorDegrees: [],
      // 用来展示学位信息文字
      eduMajorDegreesInfoStr: ''
    };
  },
  watch:{
    userInfo:{
      handler(){
        // this.init();
      },
      deep:true
    }
  },
  mounted() {
  },
  methods:{
    getHeight(){
      return this.height;
    },

  }
}
</script>

<style lang="scss" scoped>

.user-common-info {
  position: relative;
  width: 100%;
  top:0;
  z-index:999;
  padding: 0 20rpx 0 20rpx;
  box-sizing: border-box;
  //background-color: #FFFFFF;
  // 从上到下，由蓝到白
  //background: linear-gradient(180deg, #333333 0%, #FFFFFF 50%);
  background-color: #FFFFFF;
  .user-text-abs {
    position: absolute;
    right: -30rpx;
    font-size: 24rpx;
    color: #666666;
    padding: 5rpx 10rpx;
    top: -30rpx;

    .icon {
      width: 26rpx;
      height: 26rpx;
      vertical-align: middle;
    }
  }

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 55%;
    //border: 5rpx solid #60a5a4;
  }

  .user-text {
    position: relative;
    display: inline-block;
    margin-left: 20rpx;
    vertical-align: top;
    letter-spacing: 1rpx;
    width: calc(100% - 150rpx - 20rpx - 20rpx);

    .user-text-big {
      font-weight: bold;
      font-size: 36rpx;
    }

    .user-text-small {
      font-size: 24rpx;
      color: #999;
    }

  }

  .user-text-abs:active {
    opacity: .7;
  }

  .tag-box {
    margin-top: 20rpx;
    // 超出不换行
    white-space: nowrap;
    height: 70rpx;

    .tag {
      display: inline-block;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      background-color: #f5f5f5;
      color: #666;
      font-size: 22rpx;
      margin-right: 10rpx;
    }
  }
}

.user-avatar-box{
  position: relative;
  display: inline-block;

  .user-avatar-dot{
    position: absolute;
    bottom: 0;
    padding: 5rpx 10rpx;
    background-color: #60a5a4;
    font-size: 24rpx;
    border-radius: 20rpx;
    height: 30rpx;
    width: 90rpx;
    left: 50%;
    transform: translateX(-50%);

    .gender-icon{
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      left:5rpx;
    }

    .age{
      position: relative;
      display: inline-block;
      color:#FFFFFF;
      vertical-align: top;
      margin-left: 30rpx;
      top:calc(50% - 0rpx);
      transform: translateY(-50%);
    }
  }

}

</style>
